<!--  -->
<template>
  <div id="topic">
    <van-grid :border="false" :column-num="1">
        <van-grid-item class="topicList" v-for="(topic, index) in topicList" :key="index" :to="'/topicDetail/'+ topic.id">
        <van-image  :src="topic.scene_pic_url" />
        <h4 class="topic_title">{{topic.title}}</h4>
        <p class="topic_subtitle">{{topic.subtitle}}</p>
        <p class="topic_price">{{topic.price_info}}元起</p>
      </van-grid-item>
      </router-link>
    </van-grid>
    <tab-btn></tab-btn>
  </div>
</template>

<script>
import axios from 'axios'
// 导入api获取数据
import api from '../assets/config/api'
import tabBtn from '../components/tabBtn'

export default {
  data () {
    return {
      data: {}
    }
  },
  components:{
    tabBtn
  },
  computed: {
    topicList() {
      if (this.data.data) {
        return this.data.data.data
      }
    }
  },
  async mounted(){
    // console.log(api)
    let res = await axios.get(api.TopicList)
    this.data = res.data 
    // console.log(this.data)
  }
}
</script>

<style lang="less" scoped>
#topic{
  .topicList{
    position: relative;
    padding:16px 8px 70px;
    .topic_title{
      position: absolute;
      bottom: 40px;
    }
    .topic_subtitle{
      position: absolute;
      bottom: 10px;
      font-size: 14px;
      font-weight: 400;
      color: #999;
    }
    .topic_price{
      position: absolute;
      bottom: -20px;
      color: red;
    }
  }
  
}

</style>
